import { Component } from 'react';
import { Card, Row, Col, Descriptions } from 'antd';
import moment from 'moment';

import Search from '@/components/Search';
import styles from '../global.less'

class Unit extends Component<any> {
    state = {
        name: '',
        sex: 'Male',
        birthday: '',
        marriage: 'Unmarried',
        children: 0,
        city: '',
        address: [],
        admin: false,
    }

    onSubmit = (values: any) => {
        this.setState({
            name: values.name,
            sex: values.sex,
            birthday: moment(values.birthday).format('YYYY/MM/DD'),
            city: values.city,
            address: values.address,
            children: values.children,
            marriage: values.marriage,
            admin: (values.admin == undefined || !values.admin) ? false : true
        })
    }

    render() {
        const { name, sex, birthday, marriage, city, address, children, admin } = this.state
        const treeData = [{
            title: 'China',
            value: 'China',
            children: [{
                title: 'Shannxi Province',
                value: 'Shannxi Province'
            }, {
                title: 'Henan Province',
                value: 'Henan Province'
            }]
        }]
        const options = [{
            value: "Xi'an",
            label: "Xi'an",
            children: [{
                value: 'Yanta District',
                label: 'Yanta District',
            }, {
                value: "Chang'an District",
                label: "Chang'an District",
            }]
        }]
        const selection = [{
            value: 'Married',
            title: 'Married'
        }, {
            value: 'Unmarried',
            title: 'Unmarried'
        }, {
            value: 'Divorce',
            title: 'Divorce'
        }]
        const formItem = [{
            type: 'input',
            label: 'Name',
            name: 'name',
            placeHolder: 'Please input',
            rules: [{ required: true, message: 'Please input your name!' }]
        }, {
            type: 'radio',
            label: 'Sex',
            name: 'sex',
            defaultValue: this.state.sex,
            options: [{
                value: 'Male',
                title: 'Male'
            }, {
                value: 'Female',
                title: 'Female'
            }],
            rules: [{ required: true, message: 'Please select your sex!' }]
        }, {
            type: 'datePicker',
            label: 'Birthday',
            name: 'birthday',
            format: 'YYYY/MM/DD',
            placeHolder: 'Please select',
            rules: [{ required: true, message: 'Please select your birthday' }]
        }, {
            type: 'treeSelect',
            label: 'City',
            name: 'city',
            placeHolder: 'Please select',
            options: treeData,
            rules: [{ required: true, message: 'Please select your city!' }],
        }, {
            type: 'cascader',
            label: 'Address',
            name: 'address',
            placeHolder: 'Please select',
            options: options,
            rules: [{ required: true, message: 'Please select your address!' }]
        }, {
            type: 'select',
            label: 'Marital status',
            name: 'marriage',
            placeHolder: 'Please select',
            options: selection,
            rules: [{ required: true, message: 'Please select your marital status!' }]
        }, {
            type: 'inputNumber',
            label: 'Children',
            name: 'children',
            max: 3,
            min: 0
        }, {
            type: 'switch',
            label: 'Admin',
            name: 'admin'
        }]
        return (
            <>
                <Card >
                    <Row>
                        <Col span={12}>
                            <Search formItem={formItem} labelCol={{ span: 6 }} wrapperCol={{ span: 10 }} layout="horizontal" onSubmit={this.onSubmit} 
                            initialValues={{
                                sex,
                                admin,
                                children,
                                marriage
                            }}
                            />
                        </Col>
                        <Col span={12}>
                            <Descriptions title="User Info" bordered column={{ xxl: 2, xl: 2, lg: 3, md: 3, sm: 2, xs: 1 }}>
                                <Descriptions.Item label="Name" labelStyle={{ textAlign: 'center' }}>{name}</Descriptions.Item>
                                <Descriptions.Item label="Sex" labelStyle={{ textAlign: 'center' }}>{sex}</Descriptions.Item>
                                <Descriptions.Item label="Birthday" labelStyle={{ textAlign: 'center' }}>{birthday}</Descriptions.Item>
                                <Descriptions.Item label="Marital status" labelStyle={{ textAlign: 'center' }}>{marriage}</Descriptions.Item>
                                <Descriptions.Item label="Child" labelStyle={{ textAlign: 'center' }}>{children}个</Descriptions.Item>
                                <Descriptions.Item label="Admin" labelStyle={{ textAlign: 'center' }}>{admin ? 'Yes' : 'No'}</Descriptions.Item>
                                <Descriptions.Item label="City" labelStyle={{ textAlign: 'center' }}>{city}</Descriptions.Item>
                                <Descriptions.Item label="Address" labelStyle={{ textAlign: 'center' }}>{address.length>0?(address[0]/address[1]):'--'}</Descriptions.Item>
                            </Descriptions>
                        </Col>
                    </Row>
                </Card>
                <div className={styles.descriptionBlock}>
					<p>Tips:</p>
					<p>1. 'Search' component encapsulation</p>
                    <p>2. Form submission rules</p>
				</div>
            </>
        )
    }
}

export default Unit